<template>
  <div>
    <Aheader></Aheader>
    <el-container>
      <el-aside :width="$store.state.isCollapse ? '60px' : '200px'"
        ><Letmenu></Letmenu
      ></el-aside>
      <el-main style="padding: 0px">
        <!-- 面包屑导航 -->
        <div class="breadNav">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="float: left"
          >
              <el-tag
                type="info"
                @click="change(item)"
                closable
                v-for="(item, index) in $store.state.bread"
                :key="index"
                @close="$store.commit('removeTag', index)"
              >
                <router-link :to="'/'+item.index" class="span" tag="span">{{ item.title }}</router-link>
              </el-tag>
          </el-breadcrumb>
          <el-dropdown trigger="click" style="float: right; margin-top: 6px">
            <span class="el-dropdown-link">
              标签选项
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <span @click="$store.commit('clearAll')">关闭所有</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <span @click="getInfo">关闭其他</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 主要区域 -->
        <el-card>
          <router-view></router-view>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
// 头部组件
import Aheader from "./Header/Head";
// 左侧菜单栏
import Letmenu from "./Aside/Aside";
export default {
  name: "",
  components: {
    Aheader,
    Letmenu,
  },
  props: [],
  data() {
    return {
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.setHeight();
    window.addEventListener('resize',this.setHeight);
  },
  methods: {
    setHeight() {
      let html = document.documentElement || document.body;
      let html_height = html.clientHeight;
      let mains = document.querySelector(".el-main");
      mains.style.height = html_height - 80 + "px";
    },
    getRoute() {
      console.log(this.$route.path);
    },
    getInfo() {
      this.$store.commit("clearIndex", this.$route.path);
    },
    change(data){
      // console.log(data)
      this.$store.commit('changes',data.title)
      let tag = document.querySelectorAll('.el-tag')
      console.log(tag)
      tag.forEach(item=>{
        if(item.innerText == data.title){
          item.style.background = '#00dd88'
        }
      })
    }

  },
};
</script>
<style lang='scss' scoped>
.breadNav {
  width: 100%;
  background: #fff;
  height: 32px;
  margin-bottom: 20px;
}
.el-tag {
  margin: 0 5px;
}
</style>